<template>
  <div>
    <h1>toRefs</h1>
  
    <h1>{{obj.name}}</h1>
    <h1>{{obj.age}}</h1>

    <h1>{{name}}</h1>
    <h1>{{age}}</h1>

    <input type="text" v-model="obj.name" /><br>
    <input type="text" v-model="obj.age"> <br>
    <input type="text" v-model="name"><br>
    <input type="text" v-model="age"><br>
    <input type="text" v-model="name1"><br>
    <input type="text" v-model="age1">
  </div>
</template>

<script lang="ts">
import { defineComponent,reactive,toRefs } from 'vue';

export default defineComponent({
  setup () {
    const obj = reactive({
      name:'tom',
      age:10,
    });
    console.log(obj);
    const objToRefs = toRefs(obj);
    console.log(objToRefs);
    const name1 = obj.name;
    const age1 = obj.age;
    
    

    return {
      ...objToRefs,
      obj,
      name1,
      age1,
    };
  },
});
</script>

<style scoped>

</style>
